<template>
    <div>
        <div class="center-bj">
            <img class="yys-pic yys-pic-shopping" :src="info.avatar" alt="">
            <span class="center-name">{{info.user_nickname}}</span>
        </div>
        <div class="center-box clearfix" v-if="JSON.stringify(orderData) != '{}'">
            <div class="center-order b-g-f clearfix">
                <router-link :to="{name:'order',query:{taber:10}}" tag="div" class="order-box">
                    <img class="order-dian order-dian1" src="../../../static/img/tuoyuan.png" alt="">
                    <span class="my-order">我的订单</span>
                    <span class="order-link">查看全部订单</span>
                </router-link>
                <van-row type="flex">
                    <van-col span="6" class="order-img-box">
                        <router-link tag="span" :to="{name:'order',query:{taber:orderData[0].status}}" class="img1">
                            <img src="../../../static/img/daifukuan.png" alt="" srcset="">
                            <em v-if="orderData[0].cnt > 0" class="order-center-num">{{orderData[0].cnt}}</em>
                        </router-link>
                        <span class="order-title">待付款</span>
                    </van-col>
                    <van-col span="6" class="order-img-box">
                        <router-link tag="span" :to="{name:'order',query:{taber:orderData[1].status}}" class="img2">
                            <img src="../../../static/img/daifahuo.png" alt="" srcset="">
                            <em v-if="orderData[1].cnt > 0" class="order-center-num">{{orderData[1].cnt}}</em>
                        </router-link>
                        <span class="order-title">待发货</span>
                    </van-col>
                    <van-col span="6" class="order-img-box">
                        <router-link tag="span" :to="{name:'order',query:{taber:orderData[2].status}}" class="img3">
                            <img src="../../../static/img/daishouhuo.png" alt="" srcset="">
                            <em v-if="orderData[2].cnt > 0" class="order-center-num">{{orderData[2].cnt}}</em>
                        </router-link>
                        <span class="order-title">待收货</span>
                    </van-col>
                    <van-col span="6" class="order-img-box">
                        <router-link tag="span" :to="{name:'order',query:{taber:orderData[3].status}}" class="img4">
                            <img src="../../../static/img/yiwancheng.png" alt="" srcset="">
                            <!-- <em class="order-center-num">4</em> -->
                        </router-link>
                        <span class="order-title">已完成</span>
                    </van-col>
                </van-row>
            </div>
            <ul class="b-g-f clearfix center-obj">
                <router-link tag="li" :to="{name:'checklist'}" class="center-li clearfix">
                    <img class="zicha" src="../../../static/img/zicha.png" alt="">
                    <span class="obj-name">自查报告</span>
                </router-link>
                <router-link :to="{name:'dietitian',query:{id:info.dietitian_id}}" tag="li" class="center-li clearfix">
                    <img class="center-list-yingyang" src="../../../static/img/yingyangshi.png" alt="">
                    <span class="obj-name">我的营养师</span>
                </router-link>
                <router-link tag="li" :to="{name:'shoppingCart'}" class="center-li clearfix">
                    <img class="center-list-yingyang" src="../../../static/img/myVip.png" alt="">
                    <span class="obj-name">我的购物车</span>
                </router-link>
                <router-link tag="li" :to="{name:'address'}" class="center-li clearfix">
                    <img class="zicha" src="../../../static/img/orderlist.png" alt="">
                    <span class="obj-name">收货地址</span>
                </router-link>
            </ul>
        </div>
        <tabber :tabberActive="tabberActive"></tabber>
    </div>
</template>
<script>
import tabber from '../common/tabber'
import { Toast } from 'vant';
export default {
    data(){
        return{
            tabberActive:2,
            info:{},
            orderData:{}
        }
    },
    mounted(){
        this.userGetInfo()
    },
    methods:{
        // 个人信息
        userGetInfo(){
            this.$api.shopping.userGetInfo().then(resp=>{
                if(resp.code == 1){
                    this.info = resp.data
                    this.orderGetUnm()
                }else{
                    Toast(resp.msg)
                }
            })
        },
        // 获取订单的数量
        orderGetUnm(){
            this.$api.shopping.orderGetUnm().then(resp=>{
                if(resp.code == 1){
                    this.orderData = resp.data
                }else{
                    Toast(resp.msg)
                }
            })
        }
    },
    components:{
        tabber
    },
}
</script>
<style lang="less" scoped>
.center-box{
    padding: 20px 30px;
    .center-order{
        border-radius: 20px;
        padding: 20px 15px;
        .order-box{
            border-bottom: solid 1px #f5f5f5;
            background: url('../../../static/img/you.png') no-repeat center right 0px;
            background-size: 20px;
            .order-dian1{
                margin-top: 28px;
            }
            .my-order{
                font-size: 38px;
                height: 80px;
                line-height: 80px;
                display: inline-block;
            }
            .order-link{
                font-size: 32px;
                height: 80px;
                line-height: 87px;
                float: right;
                padding-right: 40px;
                overflow: hidden;
                color: #999;
                overflow: hidden;
            }
        }
        .order-img-box{
            text-align: center;
            padding-top: 40px;
            .img1{
                width: 70px;
                display: inline-block;
                position: relative;
                margin-top: 4px;
            }
            .img2{
                display: inline-block;
                position: relative;
                width: 70px;
            }
            .img3{
                display: inline-block;
                position: relative;
                width: 70px;
                margin-top: 4px;
            }
            .img4{
                display: inline-block;
                position: relative;
                width: 70px;
                margin-top: 4px;
            }
            .order-center-num{
                position: absolute;
                right: -15px;
                top: -15px;
                font-size: 30px;
                background-color: red;
                width: 35px;
                height: 35px;
                display: inline-block;
                line-height: 38px;
                text-align: center;
                color: #fff;
                border-radius: 50%;
                overflow: hidden;
            }
            .order-title{
                display: block;
                font-size: 30px;
                color: #666;
                padding-top: 10px;
            }
        }
    }
    .center-obj{
        margin-top: 30px;
        border-radius: 20px;
        padding: 20px;
        .center-li{
            border-bottom: solid 1px #f5f5f5;
            background: url('../../../static/img/you.png') no-repeat center right;
            background-size: 20px;
            height: 120px;
            overflow: hidden;
            .obj-name{
                font-size: 38px;
                line-height: 120px;
                display: inline-block;
            }
            .zicha{
                width: 44px;
                margin-top: 35px;
                float: left;
                padding-right: 30px;
            }
            .center-list-yingyang{
                width: 54px;
                margin-top: 40px;
                float: left;
                padding-right: 20px;
            }
        }
        .center-li:last-child{
            border:none;
        }
    }
}
</style>


